<template>
	<view class="">
		<Nvagats :images="images"></Nvagats>

		<view class="auth-container" :style="{backgroundColor: bgColor}">
			<!-- 顶部导航 -->


			<!-- 认证表单 -->
			<view class="auth-form">
				<!-- 身份证正面 -->
				<view class="upload-section">
					<text class="upload-title">身份证人像面</text>
					<image v-if="frontImage" :src="frontImage" class="id-card-image" mode="aspectFill"
						@click="chooseImage('front')"></image>
					<view v-else class="upload-box" @click="chooseImage('front')">
						<image :src="frontPlaceholder" class="upload-icon"></image>
						<text class="upload-tip">点击上传人像面</text>
					</view>
				</view>

				<!-- 身份证反面 -->
				<view class="upload-section">
					<text class="upload-title">身份证国徽面</text>
					<image v-if="backImage" :src="backImage" class="id-card-image" mode="aspectFill"
						@click="chooseImage('back')"></image>
					<view v-else class="upload-box" @click="chooseImage('back')">
						<image :src="backPlaceholder" class="upload-icon"></image>
						<text class="upload-tip">点击上传国徽面</text>
					</view>
				</view>


				<!-- 个人信息 -->
				<view class="form-group">
					<text class="form-label">真实姓名</text>
					<input v-model="realName" class="form-input" placeholder="请输入与身份证一致的姓名"
						placeholder-class="placeholder" />
				</view>

				<view class="form-group">
					<text class="form-label">身份证号码</text>
					<input v-model="idNumber" class="form-input" placeholder="请输入身份证号码" placeholder-class="placeholder"
						maxlength="18" />
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-btn" @click="submitAuth">
				<text class="submit-text">确定</text>
			</view>

			<!-- 协议条款 -->
			<view class="agreement">
				<text>提交即表示同意</text>
				<text class="agreement-link">《用户认证协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Nvagats from "../../Component/navgatsmy/navgatsmy.vue"
	import {
		checkidcards
	} from "../../api/outOfTheFree/index.js"
	export default {
		data() {
			return {
				images: "https://img.jingkakeji.com/img/static/shiming.png",
				bgColor: '#D6D2F9', // 背景色，您可自定义
				frontPlaceholder: 'https://img.jingkakeji.com/img/static/sfz.png', // 身份证正面占位图
				backPlaceholder: 'https://img.jingkakeji.com/img/static/sfzfan.png', // 身份证反面占位图

				frontImage: '', // 身份证正面照片
				backImage: '', // 身份证反面照片
				realName: '', // 真实姓名
				idNumber: '' // 身份证号码
			}
		},
		components: {
			Nvagats
		},
		methods: {
			// 选择图片
			chooseImage(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						if (type === 'front') {
							this.frontImage = tempFilePath
						} else if (type === 'back') {
							this.backImage = tempFilePath
						}
					}
				})
			},

			// 提交认证
			async submitAuth() {
				if (!this.realName) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					})
					return
				}

				if (!/^[^\u0000-\u00FF]{2,}$/.test(this.realName)) {
					uni.showToast({
						title: '请输入正确的中文姓名',
						icon: 'none'
					})
					return
				}

				if (!this.idNumber || !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idNumber)) {
					uni.showToast({
						title: '请输入正确的身份证号码',
						icon: 'none'
					})
					return
				}


				// 提交认证逻辑
				uni.showLoading({
					title: '认证提交中...'
				})
				let data = {
					certificate: this.idNumber,
					fullname: this.realName
				}
				let res = await checkidcards(data)
				console.log(res, "111idcurd")
				// 模拟API请求
				setTimeout(() => {
					if (res.code == 200) {


						uni.hideLoading()
						uni.showToast({
							title: '认证提交成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}, 2000)
			}
		}
	}
</script>

<style lang="scss">
	.auth-container {
		min-height: 100vh;
		// margin-top: 70rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.auth-header {
		padding: 40rpx 0;
		text-align: center;
	}

	.auth-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.auth-form {
		margin-top: 20rpx;
	}

	.upload-section {
		margin-bottom: 40rpx;
	}

	.upload-title {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.upload-box {
		height: 300rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 2rpx dashed #ddd;
	}

	.id-card-image {
		width: 100%;
		height: 300rpx;
		border-radius: 12rpx;
	}

	.upload-icon {
		width: 100rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
	}

	.upload-tip {
		font-size: 26rpx;
		color: #999;
	}

	.form-group {
		margin-bottom: 30rpx;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.placeholder {
		color: #ccc;
		font-size: 28rpx;
	}

	.submit-btn {
		margin-top: 60rpx;
		height: 90rpx;
		background-color: #7463DB;
		border-radius: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.submit-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
	}

	.agreement {
		margin-top: 30rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999;
	}

	.agreement-link {
		color: #4A6EF5;
	}
</style>